<template>
  <div>
    <div v-if="!sub">
      <!-- 操作框 -->
      <el-form class="tableSearch" size="mini">
        <el-form-item>
          <el-button type="primary" v-if='setRole("新增")' @click="routerPushAdd()">新增</el-button>
        </el-form-item>
      </el-form>

      <!-- 搜索框 -->
      <div class="tableSearch">
        <el-form size="mini">
          <el-form-item label="退货单号:" label-width="80px">
            <el-input placeholder="请输入退货出库单号" v-model="selectData.keyword"></el-input>
          </el-form-item>
          <el-form-item label="供应商名称:" label-width="110px">
            <el-input placeholder="请输入供应商名称" v-model="selectData.keySup"></el-input>
          </el-form-item>
          <el-form-item label="" label-width="15px">
            <el-button type="primary" @click='handleSearch()'>搜索</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 表格 -->
      <el-table :data="tableData">
        <el-table-column type="index" label="序号" align="center"></el-table-column>
        <el-table-column prop="purchaseinCode" label="退货出库单号" align="center"></el-table-column>
        <el-table-column prop="returnDate" label="退货时间" align="center" :formatter="tim"></el-table-column>
        <el-table-column prop="supplierName" label="供应商名称" align="center"></el-table-column>
        <el-table-column prop="amount" label="总金额" align="center"></el-table-column>
        <el-table-column prop="purchaseStatus" label="订单状态" align="center">
          <template slot-scope="scope">
            <span>{{saleStatusArray[scope.row.purchaseStatus]}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="fromCode" label="来源单号" align="center"></el-table-column>
        <el-table-column prop="userName" label="操作员" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button @click="routerPushInfo(scope.row.id)" type="text" size="mini">查看</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 页码 -->
      <page-unit :pageData="pageData" :func="_selectOrderGoodsPurchaseReturnListPage"></page-unit>
    </div>
    <div class="pageLevel" v-else>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { selectOrderGoodsPurchaseReturnListPage } from "@/api";
import u from "@/util";
import state from "@/util/state"
import pageUnit from "@/components/Page";

export default {
  computed: mapState(["sub", "merchantId", "power"]),
  components: { pageUnit },
  data () {
    return {
      saleStatusArray: state.returnStatusArr,
      selectData: {
        keyword: "", // 退货单号关键字
        keySup: "", // 供应商关键字
      },
      tableData: [],
      pageData: {
        pageSize: 20,
        currentPage: 1,
        totalItems: 0,
        pageSizeArr: [5, 10, 20]
      }
    };
  },
  mounted () {
    this._selectOrderGoodsPurchaseReturnListPage(20, 1);
  },
  watch: {
    sub: {
      handler: function (val, oldVal) {
        if (oldVal != null && val == false) {
          this._selectOrderGoodsPurchaseReturnListPage(20, 1);
        }
      },
      deep: true
    }
  },
  methods: {
    // 分配权限
    setRole (key) {
      return u.selectTitle(this.power, key)
    },

    tim (row) {
      return u.foryear(parseInt(row.returnDate));
    },

    // 获取列表
    _selectOrderGoodsPurchaseReturnListPage (pageSize, pageNum) {
      selectOrderGoodsPurchaseReturnListPage({
        shopId: this.merchantId,  // 商户id
        purchaseType: 1,  // 采购类型，
        supplierName: this.selectData.keySup,
        purchaseinCode: this.selectData.keyword,
        pageNum: pageNum,
        pageSize: pageSize
      }).then(res => {
        this.tableData = res.data.list;
        this.pageData.totalItems = res.data.pageTotal;
      });
    },

    handleSearch () {
      this._selectOrderGoodsPurchaseReturnListPage(20, 1);
    },

    // 跳新增
    routerPushAdd () {
      u.routerTo("/order-center/purchase-management/purchase-purchaseList/purchase-purchaseDetails", { operation: 1 });
    },
    
    // 跳查看
    routerPushInfo (id) {
      u.routerTo("/order-center/purchase-management/purchase-purchaseList/purchase-purchaseDetails", { id: id, operation: 2 });
    },
  }
};
</script>
